<template>
    <div class="singer-album">
        <div class="album">
            <div class="singer">
                <div class="singer-name">{{ singer.name }}</div>
                <div v-if="singer.sex === 0 || singer.sex ===1" class="singer-sex">
                    性别：{{ attachSex(singer.sex) }}
                </div>
                <div class="singer-birth">生日：{{ attachBirth(singer.birth) }}</div>
                <div class="singer-hometown">故乡：{{ singer.location }}</div>
            </div>
            <div class="singer-img">
                <img :src="singer.pic" />
            </div>
        </div>
        <div class="underImg">
            <!-- 歌手介绍 -->
            <div
                    class="mui-table-view-cell mui-collapse singer-info"
                    :class="{ 'mui-active': isActive }"
                    @click="handleChangeView()"
            >
                <a class="mui-navigate-right" href="#">{{ singer.introduction }}</a>
                <div class="mui-collapse-content">
                    {{ singer.introduction }}
                </div>
            </div>
            <div class="content">
                <album-content :songList="listOfSongs"> </album-content>
            </div>
        </div>
    </div>
</template>

<script>
    import { mixin } from "../minx/index";
    import { mapGetters } from "vuex";
    import { songOfSingerId } from "../api/index";
    import AlbumContent from "../components/AlbumContent";
    import axios from "axios";
    export default {
        name: "SingerAlbum",
        mixins: [mixin],
        components: {
            AlbumContent,
        },
        data() {
            return {
                singerId: "", //前面传来的歌手id
                singer: {}, //当前歌手信息
                isActive: false, //是否显示歌手介绍
            };
        },
        computed: {
            ...mapGetters([
                "listOfSongs", //当前播放列表
                "tempList", //当前歌手对象
                "loginIn", //用户是否已登录
                "userId", //当前登录用户id
            ]),
        },
        created() {
            this.singerId = this.$route.params.id;
            this.singer = this.tempList;
            this.getSongOfSingerId();
        },
        methods: {
            // 点击切换折叠面板样式
            handleChangeView() {
                if (this.isActive) {
                    this.isActive = false;
                } else {
                    this.isActive = true;
                }
            },
            //根据歌手id查询歌曲
            getSongOfSingerId() {
                //song/singer/detail?singerId=${id}
                axios.get("http://localhost:8888/song/singer/detail",{params:{singerId:this.singerId}}).then(res => {
                    console.log(res.data)
                    this.$store.commit("setListOfSongs", res.data);
                    // this.secnseList = res.data;
                    // console.log(this.secnseList)
                    // //通过歌曲id获取歌曲信息
                    // for (let item of this.collection) {
                    //     this.getSongsOfIds(item.songId);
                    // }
                }).catch(err => {
                        console.log(err)
                    }
                )
                // songOfSingerId(this.singerId)
                //     .then((res) => {
                //         this.$store.commit("setListOfSongs", res);
                //     })
                //     .catch((err) => {
                //         console.log(err);
                //     });
            },
            //获取性别
            attachSex(value) {
                if (value ===0) {
                    return "女";
                } else if (value ===1) {
                    return "男";
                }
                return "";
            },
        },
    }
</script>
<!--lang="scss"-->
<style lang="scss" scoped>
    // color
    $color-white: #ffffff;
    $color-white-dark: #f7f7f7;
    $color-grey: #8e98a2;
    $color-red: #e1594b;
    $color-blue: #26a2ff;
    $color-blue-dark: #48658f;
    $color-black: black;

    // distance
    $padding-out: 0 0.5em;
    ul, li {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    .singer-album {
        text-align: left;
        .album{
            .singer{
                z-index: 30;
                position: absolute;
                color: $color-white;
                top: 7em;
                padding-left: 1.5em;
                .singer-name{
                    font-size: 2em;
                    font-weight: bold;
                }
                .singer-sex,
                .singer-birth,
                .singer-hometown{
                    font-size: .75em;
                }
                .singer-sex{
                    margin-top: 1em;
                }
            }
            .singer-img {
                // 饱和度滤镜
                filter: brightness(50%);
                img {
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                }
            }
        }
        .underImg {
            position: absolute;
            z-index: 20;
            top: 15em;
            background: #fff;
            width: 100%;
            border-radius: 1.5em 0 0 0;
            padding-bottom: 100px;
        }
    }

    .singer-info{
        font-size: .75em;
        color:$color-grey;
        z-index: 30;
    }

</style>
